<template>
	<view class="">
		<el-dialog :visible.sync="show1" width="80%" @close="handleClose" zIndex="100" top="50px">

			<uploadImg @upload="(images)=>{params.images = images}" @remove="(images)=>{params.images = images}"
				:Images="params.images" title="画作" />

			<view class="display_flex" style="margin-bottom: 20rpx;">
				<view style="width: 130rpx;">编号：</view>
				<el-input placeholder="请输入编号" v-model="params.number" size="mini" type="number" />
			</view>

			<view class="display_flex" style="margin-bottom: 20rpx;">
				<view style="width: 130rpx;">中文名：</view>
				<el-input placeholder="请输入中文名" v-model="params.nameZh" size="mini" />
			</view>



			<view class="display_flex" style="margin-bottom: 20rpx;">
				<view style="width: 130rpx;">价格：</view>
				<el-input placeholder="请输入价格" v-model="params.price" size="mini" type="number" />
			</view>

			<view class="display_flex_bet u-m-b-20">
				<view class="display_flex u-m-b-20">
					<view style="width: 130rpx;">标签：</view>
					<el-select v-model="params.type" placeholder="请选择类型" size="mini" style="width: 100%;" multiple>
						<el-option v-for="item1 in typeOptions" :key="item1.value" :label="item1.label" :value="item1.value" />
					</el-select>
					<!-- <view v-for="(item,index) in params.type" class="u-m-r-10 u-border display_flex u-p-6 u-font-12">
						
						<i class=" el-icon-remove-outline u-m-r-20 u-font-16" @click="params.type.splice(index,1)"
							v-if="index != 0" />
						<i class="el-icon-plus u-font-16" @click="params.type.push('')" />
					</view> -->
				</view>

				<el-select v-model="params.class" placeholder="请选择分类" size="mini" style="width: 100%;">
					<el-option v-for="item1 in classOptions" :key="item1.value" :label="item1.label" :value="item1.value" />
				</el-select>
			</view>

			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose" size="mini">取 消</el-button>
				<el-button type="primary" @click="confirmAdd" size="mini">确 定</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>
	import chooseFile from '@/js_sdk/tencentcloud/choose-file.js';
	import uploadFile from '@/js_sdk/tencentcloud/upload-file.js';
	import getFileAccessUrl from '@/js_sdk/tencentcloud/getFileAccessUrl';

	import {
		getClipboardData
	} from '@/uni_modules/u-clipboard/js_sdk';

	let that
	export default {
		components: {},
		props: ["detail"],

		data() {
			return {
				show1: true,
				myConfig: {
					// 编辑器不自动被内容撑高
					autoHeightEnabled: false,
					// 初始容器高度
					initialFrameHeight: 240,
					// 初始容器宽度
					initialFrameWidth: '100%',
				},
				typeOptions: [{
					value: "名画",
					label: "名画"
				}, {
					value: "人物",
					label: "人物"
				}, {
					value: "动物",
					label: "动物"
				}, {
					value: "静物",
					label: "静物"
				}],
				classOptions:[{
					value: "临摹卡",
					label: "临摹卡"
				}, {
					value: "涂色卡",
					label: "涂色卡"
				},{
					value: "知识卡",
					label: "知识卡"
				},  {
					value: "手抄报",
					label: "手抄报"
				}],
				params: {
					number: this.common.getArtpptNum(),
					price: 0,
					isNice: false,

					images: [],
					imageUrl: "",
					nameZh: "",
					extraNameZh: "",
					nameEn: "",
					author: "",
					year: "",
					size: "",
					class: "",
					material: "",
					desc: "",
					extraDesc: "",
					type: [],
				},
				options: [],
			}
		},

		mounted() {
			that = this

			if (that.detail) {
				console.log(that.detail)
				that.detail.type = that.detail.type.split(",")
				that.params = that.detail
				that.$forceUpdate()
			} else {
				getClipboardData().then(res => {
					if (res) {
						//console.log(res)
						that.params.nameZh = that.getIndexValue(res, "作品别名：", "名称：", 3)
						that.params.extraNameZh = that.getIndexValue(res, "英文名称：", "作品别名：", 5)
						that.params.nameEn = that.getIndexValue(res, "创作者：", "英文名称：", 5)
						that.params.author = that.getIndexValue(res, "创作日期：", "创作者：", 4)
						that.params.year = that.getIndexValue(res, "实际尺寸：", "创作日期：", 5)
						that.params.size = that.getIndexValue(res, "类别：", "实际尺寸：", 5)
						that.params.class = that.getIndexValue(res, "材质：", "类别：", 3)
						that.params.material = that.getIndexValue(res, "", "材质：")
					}
				})
			}

			that.options = []
		},

		methods: {

			getIndexValue(str, value1, value2, index = 3) {
				str = str.trim()
				if (value1) {
					let index1 = str.indexOf(value1)
					str = str.substring(0, index1);
					console.log(index1, str)
				}

				//截取最后一个>后面的字符串
				let index2 = str.lastIndexOf(value2)
				str = str.substring(index2 + index, str.length);
				if (str.indexOf("位于：" != -1)) {
					let index3 = str.indexOf("位于：")
					str = str.split("位于：")[0]
				}
				return str
			},

			//删除文件
			clearFile(fileUrl) {
				let that = this
				that.$http.Post("txMac/deleteCosFile", {
					imageUrl: fileUrl
				}, "删除中").then(res => {
					if (that.params.type == "单个") {
						that.params.fileUrls = []
					}
				})
			},

			handleClose() {
				this.$emit("close", true)
			},

			inputVlaue(e, index) {
				that.params.tags[index] = e.detail.value
			},

			confirmAdd() {
				that.params.type = that.params.type.join(",")
				this.$http.Post("admin/artPainting/save ", this.params).then(res => {
					this.$emit("save", true)
				})
			},

			change(limit) {
				var size = "";
				if (limit < 0.5 * 1024) { //小于0.1KB，则转化成B
					size = limit.toFixed(2) + "B"
				} else if (limit < 0.5 * 1024 * 1024) { //小于0.1MB，则转化成KB
					size = (limit / 1024).toFixed(2) + "KB"
				} else if (limit < 0.5 * 1024 * 1024 * 1024) { //小于0.2GB，则转化成MB
					size = (limit / (1024 * 1024)).toFixed(2) + "MB"
				} else { //其他转化成GB
					size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB"
				}

				var sizeStr = size + ""; //转成字符串
				var index = sizeStr.indexOf("."); //获取小数点处的索引
				var dou = sizeStr.substr(index + 1, 2) //获取小数点后两位的值
				if (dou == "00") { //判断后两位是否为00，如果是则删除00                
					return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
				}
				return size;
			},


		}
	}
</script>

<style>
	.display_flex {
		display: flex;
		align-items: center;
	}
</style>